…rfile and docker compose - use pnpm to replace npm

Playwright was only used for testing the mobile-responsive layout changes.
It should not be committed - users can install it locally if they need to
run manual UI verification tests. Updated .gitignore to exclude test
scripts and screenshots.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Add a new Makefile target to capture screenshots of all pages in multiple
viewports (desktop dark, desktop light, and mobile). This generates 24
screenshots showcasing each page of the app in different theme and device
modes for documentation purposes.

The screenshot script:
- Requires the dev server to be running
- Captures all 8 pages (Devices, Saved Codes, generators, Convert, About)
- Creates 3 variants per page (dark mode, light mode, mobile)
- Saves to screenshots/new/ directory
- Uses Playwright for reliable cross-browser rendering

Usage: make screenshots

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

The app's theme localStorage values were inverted from visual expectation:
- Setting theme to 'light' renders dark UI
- Setting theme to 'dark' renders light UI

Updated script to:
1. Reload page after setting localStorage to ensure React picks up changes
2. Swap the theme values so -dark screenshots show dark UI and -light show light
3. Removed storageState approach which wasn't persisting properly

Now correctly produces:
- saved-codes-dark.png with dark theme (navy background)
- saved-codes-light.png with light theme (white background)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Frontend: 5174 (Vite dev server)
Backend: 7020 (FastAPI server)
Port 5173 reserved

Updated README with accurate port information and added port usage table.
Updated screenshot script comments to reflect port 5174.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Updated Makefile to use 'pnpm add -D playwright' instead of npm,
ensuring consistency with project's pnpm package manager.

The make screenshots target now:
1. Installs playwright as a dev dependency
2. Runs the screenshot capture script
3. Cleans up automatically on completion

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Mobile card components (DeviceCard, CodeCard) were using standard Tailwind color scheme (bg-white dark:bg-gray-800) instead of the app's inverted theme system (bg-slate-900 dark:bg-slate-50). This caused cards to display incorrect colors when dark mode was toggled on mobile viewports.

Changes:
- DeviceCard: Inverted color scheme to match app theme (dark background by default, light in dark: mode)
- CodeCard: Same color scheme fix with proper text contrast
- CodeForm: Fixed opacity and colors for mobile edit mode
- screenshots.mjs: Added mobile-dark variant to capture all 4 screenshot types per page:
  - dark.png (desktop dark UI)
  - light.png (desktop light UI)
  - mobile.png (mobile light UI)
  - mobile-dark.png (mobile dark UI)

Now generates 32 total screenshots (8 pages × 4 variants).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>